<template>
    <div class="tab-page-container">
        <a-tabs v-model:activeKey="activeKey">
            <template #leftExtra>
                <div class="page-title-area">
                    大创计划管理
                </div>
            </template>
            <a-tab-pane key="4" tab="管理全校项目" v-if="app.getRole('教务处管理员')">

            </a-tab-pane>
            <a-tab-pane key="3" tab="管理本院项目" v-if="app.getRole('院级管理员')"></a-tab-pane>
            <a-tab-pane key="2" tab="我指导的项目" v-if="app.getRole('教职工')"></a-tab-pane>
            <a-tab-pane key="1" tab="我申报的项目" v-if="app.succeed('申报大创项目')"></a-tab-pane>
        </a-tabs>
        <div class="page-pane no-padding-bottom">
            <div class="detail-view">
                <innov-searcher :params @on-enter="onSearch" :project-types='["创新训练","创业训练","创业实践"]'/>
                <a-divider />
                <a-space class="operation-area">
                    <a-button type="primary" @click="onSearch">
                        <SearchOutlined /> 搜索
                    </a-button>
                    <export-button action="">导出当前数据</export-button>
                    <export-button action="">批量导出文档</export-button>
                    <export-button action="">导出在研项目</export-button>
                    <export-button action="">导出参加大创学生名单</export-button>
                    <export-button action="">导出重名项目名单</export-button>
                </a-space>
                <a-table class="table-area" :columns="columns" :pagination="pagination" rowKey="ID" @change="onPagination"
                    :data-source="dataSource">
                    <template #headerCell="{ column }">
                        <template v-if="column.key === 'operation'">
                            <span>
                                <div class="reflush" @click="load">
                                    <sync-outlined />刷新
                                </div>
                            </span>
                        </template>
                    </template>
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.key === 'ProjectName'">
                            <span>{{ text ? text : "待填写项目名称" }}</span>
                        </template>
                        <template v-if="column.dataIndex === 'ProjectType'">
                            <span>{{ text }}</span>
                            <span v-if="!record.IsMyProject">[成员]</span>
                        </template>
                        <template v-if="column.key === 'FullProcessStatus'">
                            <span>{{ app.toText("全过程状态", record[column.key]) }}</span>
                        </template>
                        <template v-if="column.key === 'operation'">
                            <!-- 查看系列按钮 -->
                            <span v-if="record.Status === 0 && record.IsMyProject" class="a-btn" @click="cache.toEditPage(record.ID, true, true)">[填写申请表]</span>
                            <span v-else class="a-btn" @click="cache.toDetailPage(record.ID, true, true)">[查看]</span>

                        </template>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import app from '@/app'
import innovSearcher from '../searchers/innov-searcher.vue'
import { ref, reactive, watch } from 'vue'
import axios from '@/axios'
import cache from '../ProjectCache'

function getPermissionLevel() {
    if (app.getRole('教务处管理员')) return 4;
    if (app.getRole('院级管理员')) return 3;
    if (app.getRole('教职工')) return 2;
    return 1;
}

const permissionLevel = getPermissionLevel().toString();
const activeKey = ref(permissionLevel);
const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    showQuickJumper: true,
    showTotal (total) {
        return `共 ${total} 条`;
    },
    position: ["bottomCenter"]
});
const params = reactive({
    projectName: "",
    projOwner: "",
    guideTeacher: "",
    projectLevel: "",
    projStatus: -1,
    fullStatus: "-1",
    projectType: "创新训练,创业训练,创业实践",
    departId: app.GUID_EMPTY,
    applyYear: "",
    batch: "",
    lockDepartId: false,
    lockTeacher: false,
    lockOwner: false,
});
const dataSource = ref([]);

// -- 查询函数 -- //
async function load () {
    params.projectName = params.projectName.trim();
    params.projOwner = params.projOwner.trim();
    params.guideTeacher = params.guideTeacher.trim();
    
    Object.assign(params, {
        page: pagination.current,
        pageSize: pagination.pageSize,
    });

    let msg = await axios.post("/api/proj/common/GetProjs", params);
    
    let data = msg.data;
    dataSource.value = data;
    pagination.current = msg.page;
    pagination.pageSize = msg.pageSize;
    pagination.total = msg.totalRow;
}

async function onPagination (pg) {
    Object.assign(pagination, pg);
    await load();
}

async function onSearch () {
    pagination.current = 1;
    await load();
}


watch(activeKey, nv => {
    function lockField (key, locker, field, lockValue, srcValue) {
        if (nv.toString() === key.toString()) {
            params[locker] = true;
            params[field] = lockValue;
        } else {
            params[field] = params[locker] ? srcValue : params[field];
            params[locker] = false;
        }
    }
    let role = app.getRole('院级管理员');
    let departId = role ? role.ForDepart : app.GUID_EMPTY;
    lockField(3, "lockDepartId", "departId", departId, app.GUID_EMPTY);
    lockField(2, "lockTeacher", "guideTeacher", app.currentUser.Code, "");
    lockField(1, "lockOwner", "projOwner", app.currentUser.Code, "");
    onSearch();
}, { immediate: true });

const columns = ref([
    {
        title: "项目名称",
        dataIndex: "ProjectName",
        key: "ProjectName"
    },
    {
        title: "项目类型",
        dataIndex: "ProjectType",
        width: 137
    },
    {
        title: "年度",
        dataIndex: "ApplyYear",
        width: 137
    },
    {
        title: "负责人",
        dataIndex: "ProjOwner",
        width: 137
    },
    {
        title: "导师",
        dataIndex: "GuideTeacher",
        width: 137
    },
    {
        title: "负责学院",
        dataIndex: "DepartName",
        width: 137
    },
    {
        title: "项目状态",
        key: "FullProcessStatus",
        width: 137
    },
    {
        title: "操作",
        key: "operation",
    },
])
</script>

<style lang="less"></style>